<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            display: block;
        }

        a,
        s,
        u,
        del {
            text-decoration: none;
            color: #8c8d88;
        }

        i,
        em {
            font-style: normal;
        }

        strong,
        b {
            font-weight: normal;
        }

        a img {
            border: 0;
        }

        input,
        textarea {
            outline: 0;
        }

        .over {
            overflow: hidden;
            zoom: 1;
        }

        .wnqc::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        html,
        body {
            width: 100%;
            height: 100%
        }

        body {
            display: flex;
            flex-direction: column;
        }


        body {
            background-color: #f7f6fb;
        }

        /* 顶部 */
        .boxtop {
            width: 100%;
            height: 36px;
            background-color: #222222;
            position: fixed;
            top: 0;
            z-index: 1;

        }

        .boxtop .boxheart {
            width: 1240px;
            height: 36px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #ffffff;
            line-height: 36px;
            padding: 0 10px;
        }

        .boxtop .boxheart p a {
            color: #ffffff;
            letter-spacing: 1px;
        }

        .boxtop .boxheart p.iconfont {
            font-size: 12px;
        }

        .boxtop .boxheart .left {
            display: flex;
        }

        .boxtop .boxheart .left p {
            margin-right: 20px;
        }

        .boxtop .boxheart .right {
            display: flex;
        }

        .boxtop .boxheart .right p {
            margin-left: 20px;
            padding-right: 10px;
            background: url(./images/shu.png)no-repeat right center;
        }

        .boxtop .boxheart .right p:last-child {
            background: none;
        }

        /* 头部 */
        .header {
            width: 100%;
            position: fixed;
            top: 36px;
            background-color: #fff;
            z-index: 1;
        }

        .head {
            width: 1240px;
            height: 82px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            padding: 0 10px;
        }

        .head .left img {
            width: 238px;
            height: 50px;

        }

        .head .cen {
            width: 460px;
            height: 82px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 80px;
        }

        .head .cen p a:hover {
            color: #222222;
        }

        .head .search {
            width: 120px;
            height: 36px;
            border-radius: 18px;
            background-color: #f6f6f6;
            margin-left: 50px;
            padding: 0 20px;
        }

        .head .input {
            display: flex;
            justify-content: space-between;
            line-height: 36px;
        }

        .head .input .txt a {
            font-size: 12px;
            color: #d6d6d6;

        }

        .w {
            width: 1264px;
            margin: 0 auto;
        }

        .content {
            display: flex;
            justify-content: space-around;
            height: 1049px;
            margin-top: 150px;
        }

        .left {
            width: 600px;
        }

        .right {
            width: 600px;
        }

        .right h1 {
            font-size: 28px;
            font-weight: 400;
            color: #000;
            line-height: 34px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
        }

        font {
            color: rgb(247, 154, 71);
        }

        .pirce {
            width: 600px;
            height: 80px;
            background-color: rgb(255, 63, 65);
            border-radius: 10px;
            padding: 0 16px;
            font-size: 28px;
            font-weight: 500;
            position: relative;
            color: #fff;
        }

        .pirce>span {
            display: inline-block;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }

        .pirce .time {
            position: absolute;
            width: 110px;
            right: 0;
        }

        .pirce .time div {
            height: 30px;
            line-height: 40px;
            font-size: 18px;
            padding: 5px 5px 0 10px;
        }

        .pirce .usemoney {
            background-color: rgb(255, 246, 247);
            color: rgb(243, 69, 70);
            height: 50px;
            width: 200px;
            line-height: 50px;
            font-size: 19px;
            position: absolute;
            top: 16px;
            left: 143px;
            border-radius: 15px;
        }

        .btn {
            height: 230px;
        }

        .btn .b {
            width: 224px;
            height: 66px;
            border: 0;
            border-radius: 47px;
            font-size: 20px;
            margin-top: 50px;
        }

        .btn .bttn {
            margin-right: 40px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        .btn .bttn1 {
            background-color: rgb(255, 82, 82);
            color: #fff;
            cursor: pointer;
        }

        .number {
            height: 76px;
            margin-top: 20px;
        }

        .number button {
            width: 40px;
            height: 40px;
            border: 0;
            font-size: 30px;
            cursor: pointer;
            background: rgb(247, 248, 250);
        }

        .number p {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .number span {
            margin: 0 12px;
            font-size: 24px;
        }

        .peizhi,
        .color_,
        .xineng {
            overflow: hidden;
        }

        .peizhi div,
        .color_ div,
        .xineng div {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .peizhi div div,
        .color_ div div,
        .xineng div div {
            height: 60px;
            width: 215px;
            border-radius: 5px;
            padding: 0 16px;
            display: flex;
            justify-content: center;
            border: 1px solid #ccc;
            float: left;
            font-size: 19px;
            margin-bottom: 20px;
            line-height: 60px;
            cursor: pointer;
        }

        .footer ul {
            overflow: hidden;
            /* position: absolute; */
        }

        .footer ul li {
            width: 97px;
            height: 24px;
            float: left;
            font-size: 14px;
            text-align: center;
            padding: 0 8px;
            position: relative;
        }

        .footer ul li img {
            position: absolute;
            top: -2px;
            left: 0;
        }

        .box {
            height: 600px;
            width: 600px;
            position: relative;
            /* background-color: green; */
        }

        .middleBox {
            width: 600px;
            height: 600px;
            position: relative;
        }

        .middleBox span {
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(255, 100, 100, 0.6);
            display: none;
        }

        .middleBox em {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }

        .bigBox {
            width: 600px;
            height: 600px;
            position: absolute;
            left: 650px;
            top: 0;
            overflow: hidden;
            display: none;
            /* border: 1px solid orangered; */
            z-index: 8;
            border-radius: 10px;
        }

        .lppp {
            position: relative;
            left: 0;
            top: 0;
            width: 1500px;
            height: 1500px;
        }

        .list {
            width: 600px;
            height: 100px;
            padding: 5px;
            position: relative;
            margin: 10px 0;
            overflow: hidden;
        }

        .list .listImg {
            width: 800px;
            position: absolute;
            /* right: -13px; */
            /* right: 1000px; */
        }

        .list .listImg img {
            float: left;
            margin: 0 10px;
            width: 100px;
            height: 100px;
            border: solid 2px transparent;
            cursor: pointer;
        }

        .list .listImg img.active {
            border-color: blue;
        }

        .list span {
            position: absolute;
            top: 0;
            width: 20px;
            height: 70px;
            line-height: 70px;
            font-size: 12px;
            text-align: center;
            background: rgba(200, 200, 200, 0.6);
        }

        .list span.left1 {
            left: 0;
            top: 20px;
        }

        .list span.right1 {
            right: 12px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="boxtop">
        <div class="boxheart">
            <div class="left">
                <p><a href="#">OPPO官网</a></p>
                <p><a href="#">一加官网</a></p>
            </div>
            <div class="right">
                <p><a href="#">下载OPPO商城App</a></p>
                <p class="pdenglu" style="color: red;">
                    <!-- 122 -->
                    <a href="./login.html">登陆</a>
                    <a href="./myself.html">注册</a>
                </p>
                <p class="iconfont icon-gouwuche"><a href="./car1.html"> 购物车 (0)</a></p>
            </div>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header">
        <div class="head">
            <div class="left">
                <img src="./images/logo.img.png" alt="">
            </div>
            <div class="cen">
                <p><a href="#">OPPO专区</a></p>
                <p><a href="#">OnePlus专区</a></p>
                <p><a href="#">智能硬件</a></p>
                <p><a href="#">服务</a></p>
            </div>
            <div class="search">
                <div class="input">
                    <p class="txt">
                        <a href="./serach.html">OPPO K10x</a>
                    </p>
                    <p class="iconfont icon-fangdajing
                "></p>
                </div>
            </div>
        </div>
    </div>




    <div class="content w">
        <div class="left">
            <div class="box">
                <div class="showBox">
                    <div class="middleBox">
                        <!-- ///////////////////////////////////////// -->
                        <span></span>
                        <em></em>
                    </div>
                    <div class="list">
                        <div class="listImg ccc">
                        </div>
                        <span class="left1">左</span>
                        <span class="right1">右</span>
                    </div>
                </div>
                <div class="bigBox">
                    <!-- 吞吞吐吐拖拖拖拖 -->
                    <!-- <img src="./images/1-4.png" alt="" /> -->
                    <img src="" alt="" class="lppp" />
                </div>
            </div>
        </div>
        <div class="right">
            <h1></h1>
            <div></div>
            <p class="product-text">
                <font class="font1">【14 天超长续航 | 全场景睡眠监测】</font>
                <br />
                <br />
                <font style="color: #666666" class="font2">政府消费补贴，认证享95折，</font>
                <br />
                <br />
            </p>
            <div class="pirce">
                <span>￥</span>
                <span class="money price">5999</span>
                <span class="usemoney">
                    <span>卷后价</span>
                    <span>￥</span>
                    <span class="money_">5999</span>
                </span>
                <span class="time">
                    <div>距结束</div>
                    <div>4天4小时</div>
                </span>
            </div>

            <div class="peizhi" style="font-size: 18px">
                <p style="margin: 32px 0 12px">配置</p>
                <!--渲染删除位置 -->
                <div>
                    <div>8+125G</div>
                    <div>12+125G</div>
                    <div>12+125G</div>
                </div>
            </div>
            <div class="color_" style="font-size: 18px">
                <p style="margin: 32px 0 12px">颜色</p>
                <!--渲染删除位置 -->
                <div>
                    <div>星夜</div>
                    <div>云端</div>
                    <div>云端</div>
                    <div>云端</div>
                </div>
            </div>
            <div class="xineng" style="font-size: 18px">
                <p style="margin: 32px 0 12px">选择套餐</p>
                <div>
                    <div>官方标配</div>
                    <div>加499元享Enco</div>
                </div>
            </div>

            <div class="btn">
                <div class="number">
                    <p>数量</p>
                    <button class="subtract jiang">-</button>
                    <span class="amount">1</span>
                    <button class="add cont">+</button>
                </div>
                <button class="bttn b" id="addcar">加入购物车</button>
                <a href="car1.html" class="buy"><button class="bttn1 b">去结算</button></a>
                
            </div>
        </div>
    </div>
    <div class="footer">
        <br>
        <br>
        <br>
        <br>
        <ul class="w">
            <li>
                <img src="./images/22.jpg" alt="" />
                <span> 7天价保</span>
            </li>
            <li><img src="./images/22.jpg" alt="" /><span>官方正品</span></li>
            <li style="width: 234px">
                <img src="./images/22.jpg" alt="" /><span>顺丰包邮（实付满69元包邮）</span>
            </li>
            <li><img src="./images/22.jpg" alt="" /><span>全国联保</span></li>
            <li style="width: 120px">
                <img src="./images/22.jpg" alt="" /><span>官方发货&售后</span>
            </li>
            <li style="width: 120px">
                <img src="./images/22.jpg" alt="" /><span>7天无理由退货</span>
            </li>
        </ul>
    </div>
</body>
<script src="./js/move.js"></script>
<script src="./js/_ajax.js"></script>
<script src="./js/Cook.js"></script>
<!-- <script src="./js/ajax.js"></script> -->
<script>
    var pdenglu = document.querySelector(".pdenglu")
    var Cook = getCookie("users");

    ajax({
        type: "get",
        url: "http://localhost:3000/myself?id=" + Cook,
        success: (res) => {
            if (JSON.parse(res).code == 0) {
                pdenglu.innerHTML = "欢迎你" + "   " + `${JSON.parse(res).data.username}`;
                pdenglu.style.cursor = "pointer";
                pdenglu.style.cursor = "pointer";
                pdenglu.onclick = function () {
                    location.href = "myself.html";
                };
            }
        },
        error: (code) => {
            console.log("error", code);
        },
    });



    function SmallToBig() {
        this.mBox = document.querySelector(".middleBox");
        this.mSpan = document.querySelector(".middleBox span");
        this.bBox = document.querySelector(".bigBox");
        this.bImg = document.querySelector(".bigBox img");
        this.left = document.querySelector(".left1");
        this.list = document.querySelector(".list");
        this.riht = document.querySelector(".right1");
        this.right = document.querySelector(".right>h1");
        this.Img = document.querySelector(".listImg");
        this.Listimages = document.querySelector('.Listimages')
        this.lppp = document.querySelector('.lppp')
        this.im = document.createElement("img")
        this.font1 = document.querySelector(".font1")
        this.font2 = document.querySelector(".font2")
        this.money1 = document.querySelector(".money")
        this.money2 = document.querySelector(".money_")
        this.buy = document.querySelector(".buy")
        this.prev = null;
        this.index = 0;
        this.ajx();
        this.addEvent();
        this.LR();
        this.LF();
        // console.log(this.right)
    }

    SmallToBig.prototype.addEvent = function () {
        const that = this;
        this.mBox.addEventListener("mouseover", function () {
            that.show();
        });
        this.mBox.addEventListener("mouseout", function () {
            that.hide();
        });
        this.mBox.addEventListener("mousemove", function () {
            that.move();
        });

    };
    SmallToBig.prototype.show = function () {
        this.mSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.getSize();
        this.mSpan.style.width = this.bBoxW / this.bImgW * this.mBoxW + "px";
        this.mSpan.style.height = this.bBoxH / this.bImgH * this.mBoxH + "px";
    };
    SmallToBig.prototype.getSize = function () {
        this.bBoxW = this.bBox.offsetWidth;
        this.bBoxH = this.bBox.offsetHeight;
        this.bImgW = this.bImg.offsetWidth;
        this.bImgH = this.bImg.offsetHeight;
        this.mBoxW = this.mBox.offsetWidth;
        this.mBoxH = this.mBox.offsetHeight;
    };
    SmallToBig.prototype.hide = function () {
        this.mSpan.style.display = "none";
        this.bBox.style.display = "none";
    };
    SmallToBig.prototype.move = function (eve) {
        const e = eve || window.event;
        let l = e.offsetX - this.mSpan.offsetWidth / 2;
        let t = e.offsetY - this.mSpan.offsetHeight / 2;
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.mBoxW - this.mSpan.offsetWidth) {
            l = this.mBoxW - this.mSpan.offsetWidth;
        }
        if (t > this.mBoxH - this.mSpan.offsetHeight) {
            t = this.mBoxH - this.mSpan.offsetHeight;
        }
        this.mSpan.style.left = l + "px";
        this.mSpan.style.top = t + "px";
        const x = l / (this.mBoxW - this.mSpan.offsetWidth);
        const y = t / (this.mBoxH - this.mSpan.offsetHeight);
        this.bImg.style.left = -x * (this.bImgW - this.bBoxW) + "px";
        this.bImg.style.top = -y * (this.bImgH - this.bBoxH) + "px";
    };
    SmallToBig.prototype.ajx = function () {
        const tttt = this
        var id = location.search.split("=")[1]

        ajax({
            type: "get",
            url: "http://localhost:3000/data",
            success: res => {
                let Res = JSON.parse(res).data;
                var s = Res.find(a => a.pid == id)
                this.right.innerHTML = `${s.title}`
                this.font1.innerHTML = `${s.introduce}`
                this.font2.innerHTML = `${s.main}`
                this.money1.innerHTML = `${s.price}`
                this.money2.innerHTML = `${s.price}`
                var str = ""
                this.im.style.width = "100%"
                this.im.style.height = "100%"
                this.im.src = `${s.url}`
                tttt.mBox.insertBefore(this.im, tttt.mSpan);
                tttt.lppp.src = `${s.url}`

                for (var i in s.smallimgs) {
                    str += `<img src="${s.smallimgs[i]}" alt=""/>`
                }

                this.Img.innerHTML = str
                this.abc = [...this.list.children[0].children]
                this.abc.forEach((val, idx) => {
                    val.onclick = function () {
                        tttt.abc[tttt.index].className = "";
                        this.className = "active";
                        tttt.im.src = s.smallimgs[`url${idx + 1}`];
                        tttt.lppp.src = tttt.im.src
                        tttt.index = idx;
                    };
                });
            },
            error: code => {
                console.log("error", code);
            }
        })
        class AddCart {
            constructor() {
                this.cont = $(".cont");
                this.jiang = $(".jiang");
                this.addcar = $("#addcar")
                this.addEvent();
                this.amount = $(".amount")

            }
            addEvent() {
                const that = this;
                this.cont.onclick = function () {
                    that.id = id;
                    that.price = document.querySelector(".price").innerText;;
                    that.setLocal();
                };
                this.jiang.onclick = function () {
                    that.id = id;
                    that.price = document.querySelector(".price").innerText;;
                    that.setLocal2();
                };
                // console.log(this.addcar)
                this.addcar.onclick = function () {
                    that.id = id;
                    that.price = document.querySelector(".price").innerText;;
                    that.setLocal();
                };
            }

            setLocal2() {
                let goods = localStorage.getItem("goods");
                goods = goods ? JSON.parse(goods) : [];
                let i;
                const flag = goods.some((val, idx) => {
                    i = idx;
                    return val.id === this.id;
                });
                if (flag) {
                    goods[i].num--;
                    this.amount.innerHTML = goods[i].num

                    if (goods[i].num <= 1) {
                        goods[i].num = 1;
                        this.amount.innerHTML = goods[i].num
                    }
                } else {
                    goods.push({
                        id: this.id,
                        num: 1,
                        price: this.price - 0,
                        check: false
                    });
                }
                // 操作完数组后，一定要将数组存到本地存储中
                localStorage.setItem("goods", JSON.stringify(goods));
            }
            setLocal() {
                let goods = localStorage.getItem("goods");
                goods = goods ? JSON.parse(goods) : [];
                let i;
                const flag = goods.some((val, idx) => {
                    i = idx;
                    return val.id === this.id;
                });
                if (flag) {
                    goods[i].num++;
                    this.amount.innerHTML = goods[i].num
                } else {
                    goods.push({
                        id: this.id,
                        num: 1,
                        price: this.price - 0,
                        check: false
                    });
                }
                // 操作完数组后，一定要将数组存到本地存储中

                localStorage.setItem("goods", JSON.stringify(goods));

            }
        }
        new AddCart();

        function $(select) {
            return document.querySelector(select);
        }
    };
    var i = 0;
    SmallToBig.prototype.LF = function () {
        let tha = this
        this.left.onclick = function () {
            i -= 100;
            if (i < -250) {
                i = -250
            }
            move(tha.Img, {
                left: `${i}`
            })
        }
    }
    SmallToBig.prototype.LR = function () {
        let tha = this
        this.riht.onclick = function () {
            i += 100;
            if (i > 100) {
                i = 100
            }
            move(tha.Img, {
                left: `${i}`
            })
        }
    }





    new SmallToBig();


</script>

</html>